<script>
export default {
        data() {
            return {
                changeType: 1,
                datalist: [
                    {
                        name: '医药'
                    },
                    {
                        name: '餐饮'
                    },
                    {
                        name: '美容美发'
                    },
                    {
                        name: '五金'
                    },
                    {
                        name: '商场'
                    }
                ]
            }
        },
}
</script>

<template>
    <div class="table-wrap">
        <div class="table-head-wrap">
            <el-row>
                <el-col :span="3" class="el-style">
                    <div class="head-content">行业分类</div>
                </el-col>
                <el-col :span="3" class="el-style">
                    <div class="head-content">数量</div>
                </el-col>
                <el-col :span="3" class="el-style">
                    <div class="head-content">已摸排</div>
                </el-col>
                <el-col :span="3" class="el-style">
                    <div class="head-content">摸排占比</div>
                </el-col>
                <el-col :span="3" class="el-style">
                    <div class="head-content">已建档</div>
                </el-col>
                <el-col :span="3" class="el-style">
                    <div class="head-content">建档占比</div>
                </el-col>
                <el-col :span="3" class="el-style">
                    <div class="head-content">已渗透</div>
                </el-col>
                <el-col :span="3" class="el-style">
                    <div class="head-content">渗透占比</div>
                </el-col>
            </el-row>
        </div>
        <div class="table-body-wrap">
            <el-row v-for="(item, i) in datalist" :key="i">
                <el-col :span="3" class="el-style">
                    <div class="body-content">{{item.name}}</div>
                </el-col>
                <el-col :span="3" class="el-style">
                    <div class="body-content">11</div>
                </el-col>
                <el-col :span="3" class="el-style">
                    <div class="body-content">2</div>
                </el-col>
                <el-col :span="3" class="el-style">
                    <div class="body-content">15%</div>
                </el-col>
                <el-col :span="3" class="el-style">
                    <div class="body-content">80</div>
                </el-col>
                <el-col :span="3" class="el-style">
                    <div class="body-content">25%</div>
                </el-col>
                <el-col :span="3" class="el-style">
                    <div class="body-content">15</div>
                </el-col>
                <el-col :span="3" class="el-style">
                    <div class="body-content">80%</div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<style scoped lang="less">
.table-wrap {
    position: absolute;
    width: 100%;
    height: 300px;
    top: 42px;
    //border: 1px solid rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    font-size: 14px;
    .table-head-wrap {
        position: relative;
        box-sizing: border-box;
        width: 100%;
        height: 50px;
        background: rgb(231,243,255);
        .el-style {
            .head-content {
                position: relative;
                overflow: hidden;
                width: 100%;
                height: 50px;
                line-height: 50px;
                text-align: center;
                font-weight: bolder;
                color: #333;
            }
        }
    }
    .table-body-wrap {
        position: relative;
        box-sizing: border-box;
        width: 100%;
        height: calc(100% - 33.3px);
        background: white;
        overflow: auto;
        overflow-x: hidden;
        &::-webkit-scrollbar {
            /*滚动条整体样式*/
            width : 6px;  /*高宽分别对应横竖滚动条的尺寸*/
            height: 6px;
        }
        &::-webkit-scrollbar-thumb {
            /*滚动条里面小方块*/
            border-radius: 10px;
            box-shadow   : inset 0 0 5px #777777;
            background   : #ececec;
        }
        &::-webkit-scrollbar-track {
            /*滚动条里面轨道*/
            border-radius: 10px;
            background: transparent;
        }
        .el-style {
            border-bottom: 1px solid rgba(0, 0, 0, 0.2);
            .body-content {
                position: relative;
                overflow: hidden;
                width: 100%;
                height: 50px;
                line-height: 50px;
                text-align: center;
            }
        }
    }
}
</style>
